<template>
  <div class="line" id="line"></div>
</template>

<script>
export default {
  // props: ['stu'],
  props: {
    stu: {
      // 官方文档约定：default默认值，如果是数组或对象格式，必须写成函数，函数中返回数组或对象
      // default: () => ({}),
      default: () => [],
      required: true, // 加入required表示必须给我传递这个值
      type: Array // 必须给我传递数组格式
    }
  },
  data() {
    return {
      lineName: [],
      salary: [],
      truesalary: []
    }
  },
  methods: {
    // 将ajax返回的数据处理成echarts使用的数据
    processData() {
      // console.log(this.stu)
      this.stu.forEach(item => {
        this.lineName.push(item.name)
        this.salary.push(item.salary)
        this.truesalary.push(item.truesalary)
      })
    },
    draw() {
      // 实现echarts绘图
      var chartDom = document.getElementById('line')
      var myChart = this.echarts.init(chartDom)
      let option = {
        // 图例
        legend: {
          top: 20
        },
        // 鼠标移入的提示
        tooltip: {
          // axis表示轴触发，鼠标放到线条上面或下面也可以触发
          // item 表示鼠标放到每一项上才能触发
          trigger: 'axis', // 触发方式
          // 悬浮框的位置
          position: function (pt) {
            // pt = [鼠标x轴位置, 鼠标y轴位置]
            return [pt[0], '15%'] // 悬浮框左右方向跟随鼠标移动；上下方向不变（始终距离顶部15%）
          }
        },
        // 标题
        title: {
          text: '薪资 Salary',
          textStyle: {
            color: '#6d767e'
          }
        },
        xAxis: {
          type: 'category',
          //data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          // 坐标轴留白策略
          boundaryGap: false, // true表示留白；false表示不留白
          // data: date
          data: this.lineName
        },
        yAxis: {
          type: 'value',
          // 坐标轴留白策略
          // 数组，表示数据的延伸
          // y轴数据最大值 ==== 数据最大值 + 数据最大值 * 延伸比例

          // y轴数据最大值 ==== 17000 + 17000 * 50% === 25500
          boundaryGap: [0, '50%']
        },
        // 数据缩放组件
        // 数据缩放组件，有三种类型
        // type: select 通过工具箱来缩放
        // type: inside 会把数据缩放组件内置到x轴上，通过鼠标滚轮缩放
        // type: slider (默认值)，会有一个单独的拖动条
        dataZoom: [
          {
            // type: 'slider',
            start: 0, // start和end都是百分比
            end: 15
          }
        ],
        //系列数据
        series: [
          {
            name: '期望薪资',
            type: 'line',
            smooth: true, // 使用平滑曲线
            symbol: 'none', // 设置线条上没有任何点，也可以设置为空心圆、实心圆、矩形、.......
            itemStyle: {
              color: 'rgb(255, 70, 131)'
            },
            // areaStyle: {}, // 表示面试的这项删除
            data: this.salary
          },
          {
            name: '实际薪资',
            type: 'line',
            smooth: true,
            symbol: 'none',
            itemStyle: {
              color: 'rgb(255, 200, 31)'
            },
            data: this.truesalary
          }
        ]
      }

      option && myChart.setOption(option)
    }
  },
  // mounted，表示页面已经渲染完毕，此次可以找到页面元素
  // mounted里面也得不到数据，因为Ajax请求是异步的，当mounted执行的时候，Ajax还没有完成呢
  // 应该使用侦听器，还侦听 stu （stu默认是[]  === ajax请求后 ===> [xxxx]）
  watch: {
    // stu() {
    //   this.processData()
    // }
    stu: {
      handler() {
        this.processData() // 先把数据处理好，转存到 data 中
        this.draw() // 创建图表
      },
      // immediate: true, // 第一次刷新，马上侦听一次
      deep: true // 侦听对象属性的变化
    }
  }
}
</script>

<style lang="less">
.line {
  background-color: yellow;
}
</style>
